import React, { useState,useEffect } from 'react';
import {
    Modal,
    Button, Form, Input, InputNumber, Select, Switch, DatePicker
} from 'antd';
import dayjs from "dayjs"
import {deductionCompile} from '../../../../api/wj'

//表格数据类型
interface DataType {
    key: React.Key; //序号
    deId:number;//后端ID号
    deTitle: string; //标题 name
    deStandard: string;//折扣标准 discount
    deType: number; //实用行程 route 
    deState: number //以未上架判断 state
    deCreate: string; //添加时间 AddTime
    sportName?:string //适用行程名
}
interface SelectType{
    map(arg0: (item: any) => JSX.Element): React.ReactNode;
    sportId:number, 
    sportName:string
}
interface PropsType {
    isModalOpen: boolean,
    closeModal(): void,//取消弹框事件
    edit3:DataType | undefined,
    switchList:SelectType,
    value():void
}
function DiscountAlter(props: PropsType) {
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const config = {
    rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
    };
    
    /* eslint-disable no-template-curly-in-string */
    const validateMessages = {
        required: '${label} is required!',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };
    /* eslint-enable no-template-curly-in-string */

    const onFinish = (values: any) => {
        console.log('点击确定后获取的值',values);
        let newValue ={id:props.edit3?.deId,type:props.edit3?.deType,title:values.title,standard:values.standard}
        console.log('newValue',newValue);
        deductionCompile(newValue).then(res=>{
            console.log('编辑成功',res);
            if(res.code=="200"){
                //从父元素传过来的获取当页总数据的方法
                props.value()
                props.closeModal()
            }
        }).catch(err=>{
            console.log('报错了',err);
            
        })
    };
    //点击取消退出弹框
    const cancelBtn = () => {
        // console.log('点击了取消按钮');
        props.closeModal()
    }
    useEffect(()=>{
        form.setFieldsValue({
            id:props.edit3?.deId,//id
            title: props.edit3?.deTitle,//标题
            standard: props.edit3?.deStandard,//一公里抵扣多少
            sportName: props.edit3?.sportName,//适用行程名
            type: props.edit3?.deType//运动对应的ID
            // deState : props.edit3?.deState,
            // deCreate : dayjs(props.edit3?.deCreate),
        })
        console.log('子组件接收到的父组件参数',props.edit3);
    },[props])
    return (
        <div>
            {/* onOk={handleOk} onCancel={handleCancel} */}
            <Modal title="编辑" centered={true} open={props.isModalOpen} footer={null} onCancel={props.closeModal}>
                <Form
                    {...layout}
                    name="nest-messages"
                    onFinish={onFinish}
                    style={{ maxWidth: 600 }}
                    validateMessages={validateMessages}
                    initialValues={{ remember: true }}
                    form={form}
                >
                    <Form.Item name='title' label="标题" rules={[{ required: true }]} initialValue={props.edit3?.deTitle}>
                        <Input/>
                    </Form.Item>
                    <Form.Item name='standard' label="折扣标准" initialValue={props.edit3?.deStandard}>
                        <InputNumber />
                    </Form.Item>
                    <Form.Item label="适用行程" name="sportName" initialValue={props.edit3?.sportName}>
                        <Select>
                            {props.switchList?.map((item: { sportId: React.Key | null | undefined; sportName: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; }) => {
                                return <Select.Option value={item.sportId} key={item.sportId}>{item.sportName}</Select.Option>
                            })}
                        </Select>
                    </Form.Item>
                    {/* <Form.Item label="是否上架" valuePropName="checked" name="deState" initialValue={props.edit3?.deState}>
                        <Switch />
                    </Form.Item> */}
                    {/* <Form.Item name="deCreate" label="添加时间" {...config} initialValue={props.edit3?.deCreate}>
                        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss"/>
                    </Form.Item> */}
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
                        <Button type="primary" htmlType="submit" style={{marginRight:'20px'}}>
                            确认
                        </Button>
                        <Button htmlType="button" onClick={cancelBtn}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default DiscountAlter
//折扣弹框